<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="banner">
        <img src="./uploads/banner_1.jpg" alt="">
        <header>
            <div class="container">
                <div class="row">
                    <div class="logo col-lg-6 col-md-4"></div>
                    <div class="nav col-lg-6 col-md-8 hidden-xs hidden-sm">
                        <a href="#">首页</a>
                        <a href="#">博客</a>
                        <a href="#">Github</a>
                        <a href="#">TWeb Conf</a>
                        <a href="#">SuperStar</a>
                        <a href="#">Web前端导航</a>
                        <a href="#">关于</a>
                    </div>
                    <div class="icon-menu hidden-md hidden-lg"></div>
                </div>
            </div>
        </header>
    </div>


    <div class="container recomm">
        <div class="title">
            <h2>OpenSource / 开源项目</h2>
            <p>种类众多的开源项目，让你爱不释手</p>
        </div>
        <ul class="open-source clearfix">
            <li class="col-md-3 col-sm-6">
                <div class="item item1">
                    <img src="./images/omi.png" alt="">
                    <h4>OMI</h4>
                    <p>开放现代的Web组件化框架</p>
                </div>
            </li>
            <li class="col-md-3 col-sm-6">
                <div class="item item2">
                    <img src="./images/omi.png" alt="">
                    <h4>OMI</h4>
                    <p>开放现代的Web组件化框架</p>
                </div>
            </li>
            <li class="col-md-3 col-sm-6">
                <div class="item item3">
                    <img src="./images/omi.png" alt="">
                    <h4>OMI</h4>
                    <p>开放现代的Web组件化框架</p>
                </div>
            </li>
            <li class="col-md-3 col-sm-6">
                <div class="item item4">
                    <img src="./images/omi.png" alt="">
                    <h4>OMI</h4>
                    <p>开放现代的Web组件化框架</p>
                </div>
            </li>
        </ul>
        <div class="btn btn-default center-block btn_more" role="button">
            更多<span class="glyphicon glyphicon-menu-right"></span>
        </div>
    </div>
    <!-- 第二排 -->
    <div class="product container">
        <div class="title">
            <h2>Blog / 博客</h2>
            <p>最新技术发展，业界前沿博客</p>
        </div>
        <ul class="clearfix">
            <li class="col-md-3 col-sm-6">
                <div class="item">
                    <div class="pic">
                        <img src="./uploads/codetank.jpg" alt="">
                    </div>
                    <h4>Code Tank</h4>
                    <p>全世界首个JavaScript程序员...</p>
                </div>
            </li>
            <li class="col-md-3 col-sm-6">
                <div class="item">
                    <div class="pic">
                        <img src="./uploads/codetank.jpg" alt="">
                    </div>
                    <h4>Code Tank</h4>
                    <p>全世界首个JavaScript程序员...</p>
                </div>
            </li>
            <li class="col-md-3 col-sm-6">
                <div class="item">
                    <div class="pic">
                        <img src="./uploads/codetank.jpg" alt="">
                    </div>
                    <h4>Code Tank</h4>
                    <p>全世界首个JavaScript程序员...</p>
                </div>
            </li>
            <li class="col-md-3 col-sm-6">
                <div class="item">
                    <div class="pic">
                        <img src="./uploads/codetank.jpg" alt="">
                    </div>
                    <h4>Code Tank</h4>
                    <p>全世界首个JavaScript程序员...</p>
                </div>
            </li>
        </ul>
        <div class="btn btn-default center-block btn_more" role="button">
            更多<span class="glyphicon glyphicon-menu-right"></span>
        </div>
    </div>

    <div class="product pr3 container">
        <div class="title">
            <h2>Blog / 博客</h2>
            <p>最新技术发展，业界前沿博客</p>
        </div>
        <div class="container">
            <div class="newest col-md-6">
                <div class="item">
                    <div class="item-hd">
                        <div class="pull-left">最新博客</div>
                        <div class="pull-right">...</div>
                    </div>
                    <ul class="item-bd">
                        <li>
                            <a href="#">Web Worker 文献综述</a>
                            <span class="pull-right">TAT. cntchen</span>
                        </li>
                        <li>
                            <a href="#">给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践</a>
                            <span class="pull-right">TAT. cntchen</span>
                        </li>
                        <li>
                            <a href="#">Web Worker 文献综述</a>
                            <span class="pull-right">TAT. cntchen</span>
                        </li>
                        <li>
                            <a href="#">给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践</a>
                            <span class="pull-right">TAT. cntchen</span>
                        </li>
                        <li>
                            <a href="#">Web Worker 文献综述</a>
                            <span class="pull-right">TAT. cntchen</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="newest bktype col-md-6">
                <div class="item">
                    <div class="item-hd">
                        <div class="pull-left">最新博客</div>
                        <div class="pull-right">...</div>
                    </div>
                    <ul class="item-bd clearfix">
                        <li class="col-sm-12 col-md-6">
                            <img src="./images/javascript.png" alt="">
                            <div class="right-info">
                                <p>javascript</p>
                                <p>没看过这些，怎么敢说懂js，怎么敢说懂js</p>
                            </div>
                        </li>
                        <li class="col-sm-12 col-md-6">
                            <img src="./images/javascript.png" alt="">
                            <div class="right-info">
                                <p>javascript</p>
                                <p>没看过这些，怎么敢说懂js，怎么敢说懂js</p>
                            </div>
                        </li>
                        <li class="col-sm-12 col-md-6">
                            <img src="./images/javascript.png" alt="">
                            <div class="right-info">
                                <p>javascript</p>
                                <p>没看过这些，怎么敢说懂js，怎么敢说懂js</p>
                            </div>
                        </li>
                        <li class="col-sm-12 col-md-6">
                            <img src="./images/javascript.png" alt="">
                            <div class="right-info">
                                <p>javascript</p>
                                <p>没看过这些，怎么敢说懂js，怎么敢说懂js</p>
                            </div>
                        </li>
                        <li class="col-sm-12 col-md-6">
                            <img src="./images/javascript.png" alt="">
                            <div class="right-info">
                                <p>javascript</p>
                                <p>没看过这些，怎么敢说懂js，怎么敢说懂js</p>
                            </div>
                        </li>
                        <li class="col-sm-12 col-md-6">
                            <img src="./images/javascript.png" alt="">
                            <div class="right-info">
                                <p>javascript</p>
                                <p>没看过这些，怎么敢说懂js，怎么敢说懂js</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <div class="product">
        <div class="title">
            <h2>Blog / 博客</h2>
            <p>最新技术发展，业界前沿博客</p>
        </div>
        <div class="container">
           <div class="row">
            <div class="col-md-4">
                <div class="zmbz">
                    <div class="pic">
                        <img src="./uploads/jetyu.jpg">
                        <p>JetYu 于涛</p>
                    </div>
                    <p class="desc">AlloyTeam 创始人</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="zmbz">
                    <div class="pic">
                        <img src="./uploads/jetyu.jpg">
                        <p>JetYu 于涛</p>
                    </div>
                    <p class="desc">AlloyTeam 创始人</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="zmbz">
                    <div class="pic">
                        <img src="./uploads/jetyu.jpg">
                        <p>JetYu 于涛</p>
                    </div>
                    <p class="desc">AlloyTeam 创始人</p>
                </div>
            </div>
           </div>

        </div>


        <div class="btn btn-default center-block btn_more" role="button">
            更多明星<span class="glyphicon glyphicon-menu-right"></span>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="col-lg-4 col-md-12">
                <div class="copyoring">
                    <div class="logo"></div>
                    <p>成为地球卓越的Web团队</p>
                    <p>Copyright© 2020AlloyTeam. All Rights Reserved.</p>
                </div>
            </div>
            <div class="col-lg-2 visible-lg">
                <div class="links">
                    <dl>
                        <dt>兄弟团队</dt>
                        <dd>腾讯CDC</dd>
                        <dd>腾讯ISUX</dd>
                        <dd>腾讯TGideas</dd>
                        <dd>腾讯FERD</dd>
                        <dd>百度FEX</dd>
                        <dd>淘宝FED</dd>
                    </dl>
                </div>
            </div>
            <div class="col-lg-2 visible-lg">
                <div class="links">
                    <dl>
                        <dt>兄弟团队</dt>
                        <dd>腾讯CDC</dd>
                        <dd>腾讯ISUX</dd>
                        <dd>腾讯TGideas</dd>
                        <dd>腾讯FERD</dd>
                        <dd>百度FEX</dd>
                        <dd>淘宝FED</dd>
                    </dl>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <div class="qcode">
                    <div class="pull-left">
                        <img src="./uploads/qq.gif" alt="">
                        <p>QQ群:162225981</p>
                    </div>
                    <div class="pull-right">
                        <img src="./uploads/weixin.gif" alt="">
                        <p>微信公众号:AlloyTeam</p>
                    </div>
                </div>

            </div>
        </div>
    </footer>
</body>

</html>